<template>
  <div class="icon-box">{{ info.value }}</div>
</template>

<script setup lang="ts" name="ChileDateTime">
import { reactive, onMounted } from "vue";
import dayjs from "dayjs";
import utc from "dayjs/plugin/utc";
import timezone from "dayjs/plugin/timezone";
// 扩展dayjs插件
dayjs.extend(utc);
dayjs.extend(timezone);
const info = reactive({
  value: ""
});
let temp: any;
const startTime = () => {
  clearInterval(temp);
  temp = setInterval(() => {
    info.value = dayjs().tz("America/Santiago").format("YYYY-MM-DD HH:mm");
  }, 1000);
};
onMounted(() => {
  startTime();
});
</script>

<style>
.icon-box {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: #333;
}
</style>
